{% extends 'layouts/base.html' %}
{% block content %}
<style type="text/css">
    label.error {
        color: red;
        float: none;
    }
</style>
<form role="form" action="{{ url('feedback/add') }}" method="post" style="height:100%;">
    <div id="container" class="bj_color online_wrap">
        <div class="weui_cells nomargintop">
            <div class="weui_cell all_rows_cells">
                <div class="weui_cell_bd">
                    <p>标题</p>
                </div>
                <div class="weui_cell_ft weui_cell_primary top_txt">
                    <input class="weui_input right_text_input" type="text" placeholder="撰写标题" name="title"/>
                </div>
            </div>

            <div class="weui_cell all_rows_cells">
                <div class="weui_cell_bd top_txt">
                    <p>联系人</p>
                </div>
                <div class="weui_cell_ft weui_cell_primary">
                    <input class="weui_input right_text_input" type="text" name="contact" placeholder="联系人"/>
                </div>
            </div>

            <div class="weui_cell all_rows_cells">
                <div class="weui_cell_bd top_txt">
                    <p>联系方式</p>
                </div>
                <div class="weui_cell_ft weui_cell_primary">
                    <input class="weui_input right_text_input" type="tel" name="contact_phone" placeholder="联系电话" />
                </div>
            </div>

            <div class="weui_cell font_16">
                <p>内容</p>
                <div class="weui_cell_bd weui_cell_primary">
                    <textarea class="weui_textarea" rows="3" placeholder="反馈内容填写" name="content"></textarea>
                </div>
            </div>
        </div>
        <div class="bottom_btn_wrap">
            <input type="submit" class="weui_btn submit_btn" name="submit" href="javascript:"/>
        </div>
    </div>


</form>
{% endblock %}
{% block script %}
<script src="{{config['application']['site']['assetsUri']}}front/js/jquery.min.js"></script>
<script src="{{config['application']['site']['assetsUri']}}admin/js/jquery.validate.min.js"></script>
<script>
    $(function(){
        // 手机号码验证
        jQuery.validator.addMethod("isMobile", function (value, element) {
            var length = value.length;
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");
        $("form").validate({
            rules: {
                title: {
                    required: true,
                    maxlength: 20
                },
                contact: {
                    required: true,
                    maxlength: 20
                },
                contact_phone: {
                    required: true,
                    isMobile: true
                },
                content: {
                    required: true,
                    maxlength: 150
                }
            },
            messages: {
                title: {
                    required: '请输入您的问题！',
                    maxlength: '长度不能超过20个字符！'
                },
                contact: {
                    required: '请输入您的姓名！',
                    maxlength: '长度不能超过20个字符！'
                },
                contact_phone: {
                    required: '请输入您的手机号码！',
                    isMobile: '请正确填写您的手机号码！'
                },
                content: {
                    required: '请输入反馈信息！',
                    maxlength: '不能超过150个字符！'
                }
            }
        });

    });
</script>
{% endblock %}